<template>
  <div>
    <div id="vcomments"></div>
  </div>
</template>

<script>
/* 组件功能: 评论留言组件
*  组件使用状况: 已经投入使用
*  组件具体使用地方: LeftMessage */

export default {
 name: "Comment",
 methods:{
   /* 该函数用于在vue组件内部引入外联js，valine使用外部js不进行下载 */
   GetValineJS:function (){
     const s = document.createElement('script');
     s.type = 'text/JavaScript';
     /*s.src = '//unpkg.com/valine/dist/Valine.min.js';*/
     s.src = 'Valine.min.js';
     document.body.appendChild(s);
   },
   /* 该函数用于创建valine对象，配置相关内容，从而实现评论留言区域可视化
   相关参数请参考valine官方文档
   * */
  SetValineObject:function (){
    new Valine({
      el: '#vcomments',
      enable:true,
      appId:'oVTfYyu28OpccnjdFaaQWC0A-9Nh9j0Va',
      appKey:'3C2qitmnSnVyQm8UQQvmRSNT',
      serverURLs: 'https://api.shuangxing.top',
      placeholder:'既然来了，说点什么吧~',
      requiredFields:['nick'],
    })
  }
 },
 created() {
   this.GetValineJS();
 },
  mounted() {
   this.SetValineObject();
 }
}
</script>

<style>

</style>